<template>
	<div style="width: 100%;margin-top: 1.25rem;">
		<van-grid direction="horizontal" :column-num="3" :gutter="10" :border="true">
			<van-grid-item :icon="item.img" :text="item.name" v-for="(item,index) in list"
				@click="grid(index+1,item.name)" />
		</van-grid>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						"img": "http://img2.3png.com/5b72b5fe9ded1c5b8caf2e8e1e8f91761157.png",
						"name": "Mac"
					},
					{
						"img": "http://img2.3png.com/7a47da3c767dfda30ebf147b7e5500578cbd.png",
						"name": "iPad"
					},
					{
						"img": "http://img2.3png.com/7a47da3c767dfda30ebf147b7e5500578cbd.png",
						"name": "iPhone"
					},
					{
						"img": "http://img2.3png.com/6153fb2c6e44b758cc3f0e26110dc877b0ae.png",
						"name": "Watch"
					},
					{
						"img": "http://img2.3png.com/659a4534c538d60cb2df8c9fbd294cbc3e89.png",
						"name": "Music"
					},
					{
						"img": "http://img2.3png.com/2159e4df48f7a7deda904c93cc0591269654.png",
						"name": "配件"
					}

				]
			}
		},
		created() {

		},
		methods: {
			grid(index, name) {
				console.log(index, name)
				this.$router.push({
					path: '/listParticulars',
					query: {
						index: index,
						name: name
					}
				})
			}
		}
	}
</script>

<style>
	.van-grid .van-grid-item {
		box-shadow: red;
	}

	.van-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.van-grid-item__icon+.van-grid-item__text {
		font-size: 16px;
	}
</style>
